import { defineStore } from 'pinia';
import { Notification } from '@arco-design/web-vue';
import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface';
import type { RouteRecordNormalized } from 'vue-router';
import defaultSettings from '@/config/settings.json';
import { getMenuList } from '@/api/user';
import i18n from '@/locale';
import { AppState } from './types';

const useAppStore = defineStore('app', {
    state: (): AppState => ({ ...defaultSettings, permissionCodes: [] }),

    getters: {
        appCurrentSetting(state: AppState): AppState {
            return { ...state };
        },
        appDevice(state: AppState) {
            return state.device;
        },
        appAsyncMenus(state: AppState): RouteRecordNormalized[] {
            const traverse = (
                menuList: any[],
                root = 0
            ): RouteRecordNormalized[] => {
                return (menuList || []).reduce((arr, item) => {
                    const menu = {
                        path: item.router,
                        name: item.component, // 和菜单管理中的component对齐
                        meta: {
                            title:
                                item[i18n.global.t('menu.locale')] || item.name,
                            order: +item.sort,
                            hideInMenu: item.hidden,
                        },
                        children:
                            root < 1
                                ? traverse(item.children || [], root + 1)
                                : [],
                    };
                    if (menu.children.length === 0) {
                        delete menu.children;
                    }
                    arr.push(menu);
                    return arr;
                }, [] as RouteRecordNormalized[]);
            };
            return traverse(state.serverMenu);
        },
    },

    actions: {
        // Update app settings
        updateSettings(partial: Partial<AppState>) {
            // @ts-ignore-next-line
            this.$patch(partial);
        },

        // Change theme color
        toggleTheme(dark: boolean) {
            if (dark) {
                this.theme = 'dark';
                document.body.setAttribute('arco-theme', 'dark');
            } else {
                this.theme = 'light';
                document.body.removeAttribute('arco-theme');
            }
        },
        toggleDevice(device: string) {
            this.device = device;
        },
        toggleMenu(value: boolean) {
            this.hideMenu = value;
        },
        async fetchServerMenuConfig() {
            let notifyInstance: NotificationReturn | null = null;
            try {
                notifyInstance = Notification.info({
                    id: 'menuNotice', // Keep the instance id the same
                    content: 'loading',
                    closable: true,
                });
                const data = await getMenuList();
                this.serverMenu = data?.result || [];
                notifyInstance = Notification.success({
                    id: 'menuNotice',
                    content: 'success',
                    closable: true,
                });
            } catch (error) {
                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                notifyInstance = Notification.error({
                    id: 'menuNotice',
                    content: 'error',
                    closable: true,
                });
            }
        },
        clearServerMenu() {
            this.serverMenu = [];
        },
    },
});

export default useAppStore;
